import { Button, Col, Divider, Form, Input, Row, Select } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import useGetCategories from '../../helpers/getCategories'
import { search_action } from '../../store/actions/search'
import ProductionItem from './ProductionItem'

export default function Search() {
    const categories = useGetCategories()
    const { results } = useSelector(state => state.searchReducer)
    const [form] = Form.useForm()
    const dispatch = useDispatch()
    function onFinish(value) {
        dispatch(search_action(value))
        form.resetFields()
    }
    return (
        <>
            <Form form={form} onFinish={onFinish} layout='inline' initialValues={{ category: 'All' }}>
                <Input.Group compact>
                    <Form.Item name='category'>
                        <Select>
                            <Select.Option value='All'>所有分类</Select.Option>
                            {
                                categories.map(category => (
                                    <Select.Option key={category._id} value={category._id}>{category.name}</Select.Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name='search'>
                        <Input placeholder='请输入搜索关键字' />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>搜索</Button>
                    </Form.Item>
                </Input.Group>
            </Form>
            <Divider />
            <Row gutter={[16, 16]}>
                <Col span='6'>
                    {/* <ProductionItem /> */}
                    {results.map(state => (
                        <ProductionItem key={state._id} product={state} />
                    ))}
                </Col>
            </Row>
        </>
    )
}